<template>
	<view class="bg-white flex flex-direction" style="height: 100vh; width: 100vw;">
		<view style="padding: 32rpx;">
			<text class="cuIcon-close text-black" style="font-size: 50rpx; font-weight: bold;"></text>
		</view>
	
		<view style="padding: 32rpx; font-size: 50rpx; font-weight: bold; color: #000000;">
			验证码已发送至
		</view>
		
		<view style="padding: 0 32rpx; margin-top: 14rpx; height: 40rpx; font-size: 28rpx; color: #999999; line-height: 40rpx;">
			{{mobile}}
		</view>
		
		<view style="margin-top: 106rpx; padding: 0 32rpx; ">
			<view class="flex align-center solid-bottom" style="height: 104rpx;">
				<input v-model="captcha" placeholder="" maxlength="13"
					style="margin-left: 22rpx; font-size: 40rpx;" />
			</view>
		</view>
		<view style="margin-top: 32rpx; padding: 0 32rpx; height: 40rpx; font-size: 28rpx; color: #999999; line-height: 40rpx;">
			未注册的手机号验证通过后将自动注册
		</view>
		
		<view style="margin-top: 200rpx;">
			<button type="default" style="width: 656rpx;height: 96rpx;background: #007AFF; color: #FFFFFF;"
			:style="{opacity: (countDown>0 ? 0.5 : 1)}" :disabled="countDown>0" @click="send">
				<text v-if="countDown>0">{{countDown}}s后可重发</text>
				<text v-else>获取短信验证码</text>
			</button>		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				captcha: '',
				countDown: 60
			}
		},
		created() {
			this.mobile = this.$Route.query.mobile;
			this.startCountDown();
		},
		methods: {
			send() {
				if(this.countDown > 0) return;
				this.startCountDown();
				// todo
			},
			startCountDown() {
				let self = this;
				self.countDown = 60;
				self.countDown -= 1;
				if(self.clear){
					clearInterval(self.clear)
				}
				self.clear = null;
				self.clear = setInterval(_ => {
					if(self.countDown > 0){
						self.countDown -= 1;
					}else{
						clearInterval(self.clear)
					}
				},1000)
			}
		}
	}
</script>

<style>
</style>
